import React, { Component } from 'react'

/*
    在 react 中没有插槽的叫法，但是我们可以实现插槽和具名插槽
    如果我们要使用插槽，可以通过属性传递的方式进行使用，只是我们
    传递的内容是一个 虚拟DOM 
*/

const Header = (props) => {

    console.log(props.children);

    return (<>
        {props.children[0]} --- {props.left}
        <div> 没有不变了承诺 </div>
        {props.children[1]} --- {props.right}
    </>)
}


class Content extends Component {
    render() {
        return (
            <div>
                {this.props.title}
                只有说不完的谎言。

            </div>
        )
    }
}



export default class App extends Component {
    render() {
        return (
            <div>
                <Header
                    left={<strong>左边内容</strong>}
                    right={<i>右边内容</i>}
                >
                    <h1>大标题</h1>
                    <h1>二标题</h1>
                </Header>


                <hr />


                <Content title={<h1>大大标题</h1>} />
            </div>
        )
    }
}
